<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-item label="监控名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['cameraName',{rules: [{required: true, message: '请输入监控名称！'}]}]" placeholder="请输入监控名称"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监控编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['cameraCode',{rules: [{required: true, message: '请输入监控编码！'}]}]" placeholder="请输入监控编码"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              style="width: 100%"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="专题类型">
              <j-multi-select-tag v-decorator="['topicType',{rules: [{required: true, message: '请选择专题类型！'}]}]" :trigger-change="true" dictCode="sc_situation_index_catalog,catalog_name,catalog_code" placeholder="请选择专题类型" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监控类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['cameraType',{rules: [{required: true, message: '请选择监控类型！'}]}]" :trigger-change="true" dictCode="camera_type" placeholder="请选择监控类型" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监控来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['cameraSource']" placeholder="请输入监控来源"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="监控地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['cameraLocation']" placeholder="请输入监控地址"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="区域名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input readOnly v-decorator="['areaCode_dictText']" placeholder="请在地图上选择区域"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="区域编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input readOnly v-decorator="['areaCode']" placeholder="请在地图上选择区域"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input readOnly v-decorator="['lng']" placeholder="请在地图上选择纬度"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="纬度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input readOnly v-decorator="['lat']" placeholder="请在地图上选择纬度"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数据来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['dataSource']" placeholder="请输入数据来源"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="标签" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-multi-select-tag v-decorator="['labels']" :trigger-change="true" dictCode="subject_labels" placeholder="请选择标签" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <div class="map">
              <MapBaseYt ref="mapBaseYt" :initZoom=8 @loaded="initMap" />
            </div>
          </a-col>
          <a-col :span="12" style="margin-top: 20px;">
            <a-form-item label="监控图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload isMultiple  v-decorator="['cameraImgs']" ></j-image-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import MapBaseYt from '@comp/map/MapBaseYt'
import tempIcon from '@assets/map/icon/icon-temp.png'

export default {
  name: 'ScSubjectCameraInfoForm',
  components: {
    MapBaseYt
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      markerLayerGroup: null,
      map: null,
      lat: null,
      lng: null,
      labelCol: {
        xs: { span: 12 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 }
      },
      topicList: [],
      confirmLoading: false,
      validatorRules: {
      },
      url: {
        add: '/subject/scSubjectCameraInfo/add',
        edit: '/subject/scSubjectCameraInfo/edit',
        queryById: '/subject/scSubjectCameraInfo/queryById',
        getRegion: '/gisWms/getRegion'// 获取行政数据
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
  },
  methods: {
    add() {
      this.edit({})
    },
    clear() {
      if (this.map === null) return
      this.map.remove()
      this.map = null
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.lat = record.lat
      this.lng = record.lng
      if (this.map) {
        if (this.lat && this.lng) {
          this.markerLayerGroup.clearLayers()
          this.markerLayerGroup.addLayer(this.showLayer(this.lat, this.lng))
        }
      }
      this.visible = true
      this.initialDictList()
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'cameraName', 'cameraCode', 'topicType', 'cameraType', 'cameraSource', 'cameraLocation', 'areaCode_dictText', 'areaCode', 'lng', 'lat', 'labels', 'dataSource', 'cameraImgs'))
      })
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        const params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          const formData = Object.assign(this.model, values)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    initialDictList() {
      getAction('/subject/scSubjectLayerInfo/getTopicList').then(res => {
        if (res.success) {
          this.topicList = res.result
        }
      })
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'cameraName', 'cameraCode', 'topicType', 'cameraType', 'cameraSource', 'cameraLocation', 'areaCode_dictText', 'areaCode', 'lng', 'lat', 'labels', 'dataSource', 'cameraImgs'))
    },
    // 根据地图选择的经纬度，获取行政区划数据，并且数据展示在页面上
    getRegion() {
      var that = this
      that.confirmLoading = true
      getAction(this.url.getRegion, { longitude: this.lng, latitude: this.lat }).then((res) => {
        if (res.success) {
          var data = res.result
          that.model.areaCode_dictText = data.areaName
          that.model.areaCode = data.areaCode
          that.model.lat = that.lat
          that.model.lng = that.lng
          that.$nextTick(() => {
            that.form.setFieldsValue(pick(that.model, 'areaCode_dictText', 'areaCode', 'lng', 'lat'))
          })
          that.markerLayerGroup.clearLayers()
          that.markerLayerGroup.addLayer(that.showLayer(that.lat, that.lng))
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
        // that.close()
      })
    },
    // 初始化地图
    initMap() {
      this.map = this.$refs.mapBaseYt.map
      this.markerLayerGroup = L.layerGroup().setZIndex(1)
      this.map.addLayer(this.markerLayerGroup)
      if (this.lat && this.lng) {
        this.markerLayerGroup.clearLayers()
        this.markerLayerGroup.addLayer(this.showLayer(this.lat, this.lng))
      }
      if (!this.disableSubmit) {
        var that = this
        this.map.on('click', function(e) {
          var lat = e.latlng.lat
          var lng = e.latlng.lng
          that.lat = lat
          that.lng = lng
          that.getRegion()
        })
      }
    },
    showLayer(lat, lng) {
      var marker = L.marker([lat, lng], {
        icon: L.icon({
          iconUrl: tempIcon,
          iconSize: [30, 30],
          iconAnchor: [20, 20]
        })
      })
      return marker
    }
  }
}
</script>
<style scoped>
.map{
  width: 100%;
  height: 350px;
}
</style>
